<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h1>请假申请</h1>
        <table>
            <tr>
                <th>天数：</th>
                <td>
                    <el-input-number v-model="askForLeaveApply.days" :precision="0" :step="1" :min="1" />
                </td>
            </tr>
            <tr>
                <th>日期：</th>
                <td>
                    <el-date-picker v-model="daterange" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :unlink-panels="true" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
                </td>
            </tr>
            <tr>
                <th>原因：</th>
                <td>
                    <el-input v-model="askForLeaveApply.reason" :rows="1" type="textarea" placeholder="请输入原因"/>
                </td>
            </tr>
            <tr>
                <th>审批人：</th>
                <td>
                    <el-select v-model="askForLeaveApply.approveUserId" placeholder="请选择审批人">
                        <el-option v-for="item in approveUserList" :key="item.id" :label="item.username" :value="item.id"/>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td>
                    <el-button type="primary" @click="handleApply">申请</el-button>
                </td>
            </tr>
        </table>
    </div>

    <div>
        <div>
            <h1>我的请假列表（当前）</h1>
            <el-table :data="pendApproveList" stripe border style="width: 100%">
                <el-table-column prop="days" label="天数"></el-table-column>
                <el-table-column prop="date" label="日期">
                    <template #default="scope">
                        {{scope.row.startDate}} 至 {{scope.row.endDate}}
                    </template>
                </el-table-column>
                <el-table-column prop="reason" label="原因"></el-table-column>
                <el-table-column prop="approveUserName" label="审批人"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" text bg @click="showRealTimeProgressImage(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <div>
        <el-dialog v-model="realTimeProgressImageDialogVisible" title="实时进度图" width="560" :close-on-click-modal="false" :draggable="true">
            <img :src="realTimeProgressImageUrl" alt="实时进度图" />
        </el-dialog>
    </div>

    <div>
        <div>
            <h1>待我的审批列表</h1>
            <el-table :data="taskList" stripe border style="width: 100%">
                <el-table-column prop="applicantName" label="申请人"></el-table-column>
                <el-table-column prop="days" label="天数"></el-table-column>
                <el-table-column prop="date" label="日期">
                    <template #default="scope">
                        {{scope.row.startDate}} 至 {{scope.row.endDate}}
                    </template>
                </el-table-column>
                <el-table-column prop="reason" label="原因"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleApprove(scope.row, true)">批准</el-button>
                        <el-button type="danger" @click="handleApprove(scope.row, false)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <div>
        <div>
            <h1>我的请假列表（历史）</h1>
            <el-table :data="historyList" stripe border style="width: 100%">
                <el-table-column prop="days" label="天数"></el-table-column>
                <el-table-column prop="date" label="日期">
                    <template #default="scope">
                        {{scope.row.startDate}} 至 {{scope.row.endDate}}
                    </template>
                </el-table-column>
                <el-table-column prop="reason" label="原因"></el-table-column>
                <el-table-column prop="approveUserName" label="审批人"></el-table-column>
                <el-table-column prop="approve" label="审批结果">
                    <template #default="scope">
                        <el-tag v-if="scope.row.approve" type="success">通过</el-tag>
                        <el-tag v-else type="danger">拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" text bg @click="showRealTimeProgressImage(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                askForLeaveApply: {
                    days: 1,
                    startDate: null,
                    endDate: null,
                    reason: '',
                    approveUserId: ''
                },
                daterange: [],
                approveUserList: [],
                pendApproveList: [],
                realTimeProgressImageDialogVisible: false,
                realTimeProgressImageUrl: '',
                taskList: [],
                historyList: []
            }
        },
        mounted() {
            this.getApproveUserList()
            this.getPendApproveList()
            this.getTaskList()
            this.getHistoryList()
        },
        methods: {
            getApproveUserList() {
                axios.get('/approveUserList').then((res) => {
                    this.approveUserList = res.data
                })
            },
            handleApply() {
                this.askForLeaveApply.startDate = this.daterange[0]
                this.askForLeaveApply.endDate = this.daterange[1]
                axios.post('/apply', this.askForLeaveApply).then((res) => {
                    this.$message.success(res.data.message)
                    this.getPendApproveList()
                    this.daterange = []
                    this.askForLeaveApply = {
                        days: 1,
                        startDate: null,
                        endDate: null,
                        reason: '',
                        approveUserId: ''
                    }
                })
            },
            getPendApproveList() {
                axios.get('/pendApproveList').then((res) => {
                    this.pendApproveList = res.data
                })
            },
            showRealTimeProgressImage(row) {
                this.realTimeProgressImageUrl =  '/realTimeProgressImage/' + row.processInstanceId
                this.realTimeProgressImageDialogVisible = true
            },
            getTaskList() {
                axios.get('/taskList').then((res) => {
                    this.taskList = res.data
                })
            },
            handleApprove(row, approve) {
                row.approve = approve
                axios.post('/approve', row).then((res) => {
                    this.$message.success(res.data.message)
                    this.getTaskList()
                })
            },
            getHistoryList() {
                axios.get('/historyList').then((res) => {
                    this.historyList = res.data
                })
            }
        },
    }).use(ElementPlus).mount('#app')
</script>
</body>
</html>